<template>
	<div id="centreRight1">
		<div class="bg-color-black">
	
			<span style="color:#5cd9e8">
				<svg-icon icon-class="alalist"></svg-icon>
			</span>
			<span class="fs-xl text mx-2">物料超期警告信息</span>
		</div>
		
		<div class="d-flex">
			<dv-scroll-board :config="config" style="box-sizing:border-box;height:90%;width:100% " />
		</div>
		
		<!-- <el-table :data="tableData"  ref="table" border style="width: 100%;height: 95%;margin-top: -1%;">
			<el-table-column prop="descr" label="标题行" width='66' align='center' show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="sku" label="计划单号" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="lot7" label="物料编号" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="lot5" label="物料名称" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="qty" label="数量" width='66'>
			</el-table-column>
		</el-table> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [],
				config: {
					header: ["计划单号", "物料名称", "数量","超期天数"],
					data: [ ],
					rowNum: 9, //表格行数
				
					headerBGC: "transparent", //表头
					oddRowBGC: "transparent", //奇数行
					evenRowBGC: "transparent", //偶数行
					align: ["left"],
					columnWidth: [60,120,120,60,120],
					index: true,
					indexHeader:'行号'
				}
			}
		},
		mounted() {
			this.fetchData();
		},
		methods: {
			fetchData() {
				this.config.data = [];
				this.$http.get('/API/getInventorAlarm', ).then((response) => {
					if (response.data.code == 0) {
						let map = response.data.data;
						
						let  data11 = map.map(( item )=>{
							let ar =[];
							ar.push(item.lot6) ; 
							ar.push(item.descr) ; 
							ar.push(item.qty) ; 
							ar.push(item.chaoqi<0 ? item.chaoqi+'(临近)' : item.chaoqi ); 
							return ar;
						})
						
						this.config.data = data11;
		
						this.config = {
							...this.config
						}
		
						setTimeout(this.fetchData, 100000);
					}
		
		
				})
		
			},
		}
	}
</script>

<style lang="scss" scoped>
	.into {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.topTitle {
			height: 10%;
			padding-top: 15px;
		}

		.content {
			flex: 2;
		}
	}

	.table-wrapper /deep/ .el-table--fit {
		//padding: 20px;
	}

	.table-wrapper /deep/ .el-table,
	.el-table__expanded-cell {
		background-color: transparent;
	}

	.table-wrapper /deep/ .el-table tr {
		background-color: transparent !important;
	}

	.table-wrapper /deep/ .el-table th {
		//height: 20px;
		background-color: transparent !important;
	}


	.table-wrapper /deep/ .el-table--enable-row-transition .el-table__body td,
	.el-table .cell {
		background-color: transparent;
	}
</style>
